<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台模板</title>
    <link rel="stylesheet" href="../../css/index.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../css/add.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../css/bootstrap.css" type="text/css" media="screen" />
   <%--
    <link rel="stylesheet"href="../../css/bootstrap-table.css">

    <script type="text/javascript" src="../../js/bootstrap-table.js"></script>
    --%>
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {

            //queryAlarmPage();
        })

        //分页查询
        function queryAlarmPage(){
            //$('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data',
                // toolbar: "#toolbar",
                //sidePagination: "true",
                sortable: true,
                sortName:"name",
                sortOrder:"desc",
                striped: true, // 是否显示行间隔色
                //pageSize: 5,
                //pageList: [10, 50, 100, 200, 500],
                search: false, //不显示 搜索框
                showColumns: false, //不显示下拉框（选择显示的列）
                sidePagination: "server", //服务端请求
                serverSort:"false",
                pagination:true,
                showRefresh:true,
                search:true,
                //queryParams: queryParams,
                columns: [
                    {
                        field: 'id',
                        title: 'id',
                        sortable:false
                    },
                    {
                        field: 'name',
                        title: 'name',
                        sortable:true
                    },
                    {
                        field: 'price',
                        title: 'price',
                        sortable:true
                    }
                ]
            });
        }
        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageIndex: params.pageNumber,
                name: params.sortName,
                order: params.sortOrder
            };
        }
    </script>
</head>
<body>
<%--<div class="route_bg">
    <a href="#">主页</a><i class="glyph-icon icon-chevron-right"></i>
    <a href="#">菜单管理</a>
</div>
<table id="table" class="table table-bordered table-hover table-striped"></table>--%>
<table
        id="table"
        data-toggle="table"
        data-height="460"
        data-search="true"
        data-show-refresh="true"
        data-method="post"
        data-pagination="true"
        data-side-pagination="server"
        data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
    <thead>
    <tr>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>
</body>
</html>